<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				height:2000px;
			}
			#box{
				height:100px;
				width:100px;
				background-color: red;
				position: fixed;
				right:50px;
				bottom:50px;
				opacity: 0;
				transition: opacity 1s;
			}
		</style>
	</head>
	<body>
		<h1>11111</h1>
		<div id="box">
			返回顶部
		</div>
		<script>
			let box=document.getElementById("box");
			let html=document.documentElement||document.body;
			
			//当滚动条滚动的时候，返回顶部的按钮慢慢出现
			//慢慢出现 不能display, display与transition，不能一起使用
			//         opacity可以与transition，一起使用
			window.onscroll=function(){
				if(html.scrollTop>50){
					box.style.opacity=1;
				}else{
					box.style.opacity=0;
				}
			}
			
			let timer=null,speed=50;
			//点击 返回顶部按钮，滚动条慢慢上去
			box.onclick=function(){
				//html.scrollTop=0;
				if(timer==null){
					timer=setInterval(function(){
						//当 html.scrollTop 小于等于0，
						//定时定时器
						if(html.scrollTop<=0){
							clearInterval(timer);
							timer=null;
							html.scrollTop=0;//距离顶部，直接写成0
							return;//中断
						}
						html.scrollTop-=speed;
					},10)
				}
			}
		</script>
	</body>
</html>
